<template>
  <section class="navbar-wrapper">
    <!-- 安全运行天数 -->
    <div class="runTime-box">
      <span>安全运行</span>
      <ul class="runTime-list-box">
        <li class="runTime-list-item">1</li>
        <li class="runTime-list-item">2</li>
        <li class="runTime-list-item">3</li>
        <li class="runTime-list-item">4</li>
        <span>天</span>
      </ul>
    </div>
    <!-- 中间部分，标题+菜单 -->
    <div class="navbar-title-box">
      <!-- 标题部分 -->
      <div class="navbar-title">
        <span style="margin-left:14px;">数据中心基础设施智能监控管理系统</span>
      </div>
      <!-- 菜单部分 -->
      <section class="menu-box">
        <!-- 左边菜单部分 -->
        <section class="menu-left">
          <menu-list></menu-list>
        </section>
        <!-- 右边菜单部分 -->
        <section class="menu-right">
          <menu-list></menu-list>
        </section>
      </section>
    </div>
    <!-- 右边部分 -->
    <section class="narbar-right">
      <!-- 搜索部分 -->
      <div class="search-box">
        <a-input placeholder="请输入账号" v-model:value="searchVal">
          <template #prefix>
            <SearchOutlined type="user" />
          </template>
        </a-input>
      </div>
      <!-- 时间部分 -->
      <div class="time-box">
        <p class="hour-box">14:00:09</p>
        <p class="date-box">
          2021/03/17
          <span>星期三</span>
        </p>
      </div>
      <!-- 系统消息+用户下拉 -->
      <div class="icon-box">
        <BellOutlined />
      </div>
      <!-- 用户信息 -->
      <div class="user-info">
        <GithubOutlined class="head-picture" />
        <span class="user-name">user</span>
        <DownOutlined />
      </div>
    </section>
  </section>
</template>

<script lang="ts">
import {
  SearchOutlined,
  BellOutlined,
  DownOutlined,
  GithubOutlined,
} from "@ant-design/icons-vue";
import { defineComponent, ref } from "vue";
import menuList from "../components/menuList.vue";
export default defineComponent({
  name: "Navbar",
  components: {
    menuList,
    SearchOutlined,
    BellOutlined,
    DownOutlined,
    GithubOutlined,
  },
  setup() {
    const searchVal = ref<string>("");
    return {
      searchVal,
    };
  },
});
</script>

<style lang="scss">
// 媒体查询的参数
$type: screen;
$proto: max-width;
$value: 1740px;

$navbarHeight: 60px;
$navbarTitleWidth: 380px;
$navbarTitleHeight: 64px;
$navbarHeight: 60px;
$timeBoxHeight: 40px;
$inputColor: #92c9f3;

$runTimeWidth: 260px;
$menuWidth: 1000px;
$rightWidth: calc(100% - #{$runTimeWidth} - #{$menuWidth});
.center {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}
.navbar-wrapper {
  display: flex;
  width: 100%;
  height: $navbarHeight;
  background: url("../assets/images/navbarBg1.png") no-repeat;
  background-size: 100% 100%;
  // 安全运行天数
  .runTime-box {
    position: absolute;
    left: 20px;
    display: flex;
    width: $runTimeWidth;
    line-height: $timeBoxHeight;
    height: $timeBoxHeight;
    color: #fff;
    margin: 10px 0;
    .runTime-list-box {
      display: flex;
      .runTime-list-item {
        width: 30px;
        height: 40px;
        margin: 0 4px;
        font-size: 20px;
        font-weight: bold;
        color: #00f6ff;
        background: url("../assets/images/timeNumberBg.png") no-repeat;
        background-size: 100% 100%;
        text-align: center;
      }
    }
  }
  // 中间部分
  .navbar-title-box {
    position: relative;
    width: $menuWidth;
    height: $navbarTitleHeight;
    background: url("../assets/images/navbarTitleBg1.png") no-repeat;
    background-size: 100% 100%;
    margin: 0 auto;
    @extend .center;
    @media #{$type} and ($proto: $value) {
      width: 800px;
    }
    .navbar-title {
      height: $navbarTitleHeight;
      width: $navbarTitleWidth;
      line-height: $navbarTitleHeight;
      color: #fff;
      font-size: 18px;
      text-align: center;
      letter-spacing: 2px;
      font-weight: bold;
      @extend .center;
      @media #{$type} and ($proto: $value) {
        font-size: 14px;
      }
    }
    .menu-box {
      height: 100%;
      // border:1px solid yellow;
      .menu-left {
        position: absolute;
        left: 0;
        // bottom:10px;
      }
      .menu-right {
        position: absolute;
        right: 0;
        // bottom:10px;
      }
    }
  }
  // 右边部分
  .narbar-right {
    display: flex;
    text-align: right;
    position: absolute;
    right: 0;
    min-width: 100px;
    // max-width: 400px;
    height: $navbarHeight;
    // overflow-x: auto;
    // overflow-y:hidden;
    .search-box {
      width: 120px;
      margin-right: 20px;
      @media #{$type} and ($proto: $value) {
        margin-right: 10px;
      }

      .ant-input-prefix {
        color: $inputColor;
        margin-right: 10px;
      }
      .ant-input-affix-wrapper {
        margin-top: 14px;
        border-radius: 20px;
        border: 1px solid $inputColor;
        background: transparent;
        @media #{$type} and ($proto: $value) {
          height: 30px;
          margin-top: 18px;
        }
        .ant-input {
          background: transparent;
          color: $inputColor;
          font-size: 12px;
          &::placeholder {
            color: $inputColor;
          }
        }
      }
    }
    .time-box {
      color: #fff;
      min-width: 100px;
      text-align: center;
      line-height: 1.6;
      margin: 4px 10px 0;
      @media #{$type} and ($proto: $value) {
        font-size: 12px;
      }
      .hour-box {
        font-size: 18px;
        color: #00f6ff;
        font-weight: bold;
        letter-spacing: 6px;
        @media #{$type} and ($proto: $value) {
          margin-top: 6px;
          font-size: 14px;
        }
      }
    }
    .icon-box {
      color: #fff;
      font-size: 24px;
      margin: 18px 0 0 10px;
    }
    .user-info {
      color: #fff;
      margin-top: 14px;
      .anticon {
        margin: 0 10px;
        cursor: pointer;
      }
      .head-picture {
        font-size: 30px;

        vertical-align: middle;
      }
      .user-name {
        display: inline-block;
      }
    }
  }
}
</style>